<template>
  <div class="app-container">
    <el-row style="margin-bottom: 10px;">
      <el-col>
        <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="80px">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :offset="1">
        <el-button type="success" round icon="el-icon-plus" @click="handleDialog">新增</el-button>
        <el-button type="primary" round icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="info" round @click="resetQuery">重置</el-button>
        <el-button type="primary" round icon="el-icon-upload2" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="grid-content bg-purple">
          <el-table
            :data="tableData"
            stripe
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="姓名"
              width="100">
            </el-table-column>
            <el-table-column
              prop="userBreakfast"
              label="早餐">
              <template slot-scope="scope">
                <div v-if="scope.row.userBreakfast !== 0 && scope.row.breakfastRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.breakfastRemark" placement="top">
                    <span>{{ scope.row.userBreakfast }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userBreakfast }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userLunch"
              label="午餐">
              <template slot-scope="scope">
                <div v-if="scope.row.userLunch !== 0 && scope.row.lunchRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.lunchRemark" placement="top">
                    <span>{{ scope.row.userLunch }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userLunch }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userDinner"
              label="晚餐">
              <template slot-scope="scope">
                <div v-if="scope.row.userDinner !== 0 && scope.row.dinnerRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.dinnerRemark" placement="top">
                    <span>{{ scope.row.userDinner }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                    <span>{{ scope.row.userDinner }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFruit"
              label="水果">
              <template slot-scope="scope">
                <div v-if="scope.row.userFruit !== 0 && scope.row.fruitRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.fruitRemark" placement="top">
                    <span>{{ scope.row.userFruit }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userFruit }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFruit"
              label="衣服">
              <template slot-scope="scope">
                <div v-if="scope.row.userClothe !== 0 && scope.row.clotheRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.clotheRemark" placement="top">
                    <span>{{ scope.row.userClothe }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userClothe }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFruit"
              label="日用">
              <template slot-scope="scope">
                <div v-if="scope.row.userDailyExpenses !== 0 && scope.row.dailyExpensesRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.dailyExpensesRemark" placement="top">
                    <span>{{ scope.row.userDailyExpenses }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userDailyExpenses }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFruit"
              label="电商">
              <template slot-scope="scope">
                <div v-if="scope.row.userEcommerce !== 0 && scope.row.ecommerceRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.ecommerceRemark" placement="top">
                    <span>{{ scope.row.userEcommerce }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userEcommerce }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFruit"
              label="交通">
              <template slot-scope="scope">
                <div v-if="scope.row.userTraffic !== 0 && scope.row.trafficRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.trafficRemark" placement="top">
                    <span>{{ scope.row.userTraffic }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userTraffic }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userFather"
              label="爸爸">
              <template slot-scope="scope">
                <div v-if="scope.row.userFather !== 0 && scope.row.fatherRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.fatherRemark" placement="top">
                    <span>{{ scope.row.userFather }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userFather }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userMother"
              label="妈妈">
              <template slot-scope="scope">
                <div v-if="scope.row.userMother !== 0 && scope.row.motherRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.motherRemark" placement="top">
                    <span>{{ scope.row.userMother }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userMother }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="userOther"
              label="其他">
              <template slot-scope="scope">
                <div v-if="scope.row.userOther !== 0 && scope.row.otherRemark !== ''">
                  <el-tooltip class="item" effect="light" :content="scope.row.otherRemark" placement="top">
                    <span>{{ scope.row.userOther }}</span>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span>{{ scope.row.userOther }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              width="110"
              label="总计">
              <template slot-scope="scope">
                {{ (Number(scope.row.userLunch) + Number(scope.row.userBreakfast) + Number(scope.row.userEcommerce)
                  + Number(scope.row.userDinner) + Number(scope.row.userFruit)
                  + Number(scope.row.userFather) + Number(scope.row.userMother)
                  + Number(scope.row.userOther)).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              :formatter="formatterTime"
              prop="recordTime"
              width="120"
              label="日期">
            </el-table-column>
            <el-table-column
              width="220"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleView(scope.$index, scope.row)">查看
                </el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="queryTable"
          />
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-dialog :title="this.dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-row>
            <el-col :span="10">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.userName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="日期" :label-width="formLabelWidth">
                <!--            <el-input v-model="form.recordTime" autocomplete="off"></el-input>-->
                <el-date-picker
                  v-model="form.recordTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="早餐" :label-width="formLabelWidth">
                <el-input v-model="form.userBreakfast" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.breakfastRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="中餐" :label-width="formLabelWidth">
                <el-input v-model="form.userLunch" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.lunchRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="晚餐" :label-width="formLabelWidth">
                <el-input v-model="form.userDinner" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.dinnerRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="水果" :label-width="formLabelWidth">
                <el-input v-model="form.userFruit" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.fruitRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="衣物" :label-width="formLabelWidth">
                <el-input v-model="form.userClothe" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.clotheRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="日用" :label-width="formLabelWidth">
                <el-input v-model="form.userDailyExpenses" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.dailyExpensesRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="电商" :label-width="formLabelWidth">
                <el-input v-model="form.userEcommerce" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.ecommerceRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="交通" :label-width="formLabelWidth">
                <el-input v-model="form.userTraffic" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.trafficRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="妈妈" :label-width="formLabelWidth">
                <el-input v-model="form.userMother" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.motherRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="爸爸" :label-width="formLabelWidth">
                <el-input v-model="form.userFather" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.fatherRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="其他" :label-width="formLabelWidth">
                <el-input v-model="form.userOther" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  v-model="form.otherRemark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddData">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>

  </div>

</template>
<script>
import {addCost, delCost, listUserCost, updateCost, viewCost} from "@/api/system/cost";

import Treeselect from "@riophae/vue-treeselect";

export default {
  name: "Cost",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: {Treeselect},
  data() {
    return {
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      dialogFormVisible: false,
      form: {
        userName: '',
        countId: '1',
        recordTime: '',
        userBreakfast: '',
        userDinner: '',
        userLunch: '',
        userFruit: '',
        userClothe: '',
        userOther: '',
        userMother: '',
        userFather: '',
        userDailyExpenses: '',
        userEcommerce: '',
        userTraffic: '',
        breakfastRemark: '',
        lunchRemark: '',
        dinnerRemark: '',
        otherRemark: '',
        clotheRemark: '',
        fruitRemark: '',
        motherRemark: '',
        fatherRemark: '',
        dailyExpensesRemark: '',
        ecommerceRemark: '',
        trafficRemark: '',
        pkId: '',
      },
      formLabelWidth: '120px',
      dialogTitle: '新增',
      // 日期范围
      dateRange: [],
    };
  },
  watch: {},
  created() {
    this.queryTable()
  },
  methods: {
    queryTable() {
      // debugger
      listUserCost(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    handleSearch() {
      this.loading = true;
      this.queryTable()
    },
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      };
    },
    // 截取时间 只展示年月日
    formatterTime(row, column) {
      let data = row[column.property]
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.dialogTitle = '编辑'
      this.form = row
    },
    handleView(index, row) {
      // debugger
      this.dialogFormVisible = true
      this.dialogTitle = '查看'
      // this.form = row

      viewCost(row.pkId).then(res => {
        if (res.code == '200') {
          this.form = res.data
        }
      })
    },
    handleDelete(index, row) {
      const delArr = []
      delArr.push(row.pkId)
      delCost(delArr).then(res => {
        if (res.code == '200') {
          this.$modal.msgSuccess("删除成功");
          this.queryTable()
        }
      })

    },
    handleDialog() {
      this.dialogFormVisible = true
    },
    handleAddData() {
      if (this.form.pkId == '') { // 新增
        this.dialogFormVisible = false
        this.handleSubmit()
      } else {
        this.dialogFormVisible = false
        this.handleUpdate()
      }

      this.clearForm()
    },
    handleSubmit() {
      if (this.form.userBreakfast === null) {
        this.form.userBreakfast = 0
      }
      if (this.form.userLunch === null) {
        this.form.userLunch = 0
      }
      if (this.form.userDinner === null) {
        this.form.userDinner = 0
      }
      addCost(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
        this.queryTable();
      });
    },
    handleUpdate() {
      // userBreakfast  userLunch userDinner

      updateCost(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.queryTable();
      });
    },
    clearForm() {
      this.form = {
        userName: '',
        countId: '',
        recordTime: '',
        userBreakfast: '',
        userDinner: '',
        userLunch: '',
        pkId: '',
      }
    },
    handleExport() {
      let query = {
        pageNum: 1,
        pageSize: 1000
      }

      this.download('system/cost/export', {
        ...query
      }, `user_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
